<script lang="ts" setup>
import { onMounted, ref } from "vue";
import L1 from "./components/L1.vue";
import L2 from "./components/L2.vue";
import L3 from "./components/L3.vue";
import R1 from "./components/R1.vue";
import R2 from "./components/R2.vue";
import R3 from "./components/R3.vue";
import Map from "./components/Map.vue";

const width = window.screen.width;
// console.log(width);

// const scale = width / 2560;
const content = ref<HTMLElement>();
const scale = ref(1);
onMounted(() => {
  // const height = content.value?.clientHeight;
  // if (height) scale.value = 0.9 || height / 1080;
  // console.log(scale.value);
});
</script>

<template>
  <div class="full-v bg-black flex-center">
    <div
      ref="content"
      id="content"
      class="flex-x-between w-full h-auto p-x-80px p-t-120px p-b-50px"
    >
      <header class="w-full absolute top-30px left-0 flex-center">
        <p class="w-full text-50px text-center tracking-5px">亚运震情在线</p>
      </header>
      <div class="fixed top-20px right-30px">
        <!-- <span>时间</span> -->
      </div>

      <section>
        <L1 />
        <L2 />
        <L3 />
      </section>
      <section class="flex-1 h-full flex-center relative">
        <!-- <div class="bg-ring"></div> -->
        <Map class="map" />
        <div
          id="legend"
          class="absolute right-60px bottom--20px flex-col-between border-solid border-3px border-blue-2 p-20px"
        >
          <p class="text-center text-blue-5 font-bold text-20px">图例</p>
          <div class="flex-col-between m-t-20px">
            <li class="flex m-y-10px">
              <div class="w-70px flex-center">
                <img src="@/assets/images/maker.png" alt="" />
              </div>
              <span class="text-18px">站台</span>
            </li>
            <li class="flex m-y-10px">
              <div class="w-70px flex-center">
                <img src="@/assets/images/maker-red.png" alt="" />
              </div>
              <span class="text-18px">震中</span>
            </li>
            <li class="flex m-y-10px">
              <div class="w-70px flex-center">
                <img src="@/assets/images/maker-venue.png" alt="" />
              </div>
              <span class="text-18px">亚运场馆</span>
            </li>
          </div>
        </div>
      </section>
      <section>
        <R1 />
        <R2 />
        <R3 />
      </section>
    </div>
  </div>
</template>

<style lang="less" scoped>
#content {
  min-width: 1920px;
  background-image: url("@/assets/images/screen-bg.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;

  // transform: scale(v-bind(scale));
}
.bg-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(transparent, #0a2843);
  z-index: 10;
  position: absolute;
}
div {
  li {
  }
}
.map {
  // transform: rotateX(40deg);
}
#legend {
  background-color: rgba(14, 55, 98, 0.5);
}
</style>
